<!doctype html><html><head><meta charset="utf-8" />
<title>uuCanvas.js - Reference</title>
<style type="text/css">@import url(README.css);</style>
<script type="text/javascript" src="uuCanvas.js"></script>
<script>
function xcanvas(uu, nodes) {
    var ctx1 = uu.id("drawCircle").getContext("2d");
    var ctx2 = uu.id("drawRoundRect").getContext("2d");

    ctx1.drawCircle(60, 60, 40, uu.color('hsl(200,100%,50%)'),
                                uu.color('hsl(200,80%,30%)'), 5);

    // green leaf
    ctx2.drawRoundRect(10, 60, 50, 50, [30, 0, 30, 0],
                                uu.color('hsl(100,100%,50%)'),
                                uu.color('hsl(100,80%,30%)'), 5);

    ctx2.drawRoundRect(10, 10, 50, 50, [0, 30, 0, 30],
                                uu.color('hsl(200,100%,50%)'),
                                uu.color('hsl(200,80%,30%)'), 5);
    ctx2.drawRoundRect(60, 10, 50, 50, [30, 0, 30, 0],
                                uu.color('hsl(200,100%,50%)'),
                                uu.color('hsl(200,80%,30%)'), 5);
    ctx2.drawRoundRect(60, 60, 50, 50, [0, 30, 0, 30],
                                uu.color('hsl(200,100%,50%)'),
                                uu.color('hsl(200,80%,30%)'), 5);
}
</script>
</head>
<body>
<p>
   | <a href="http://code.google.com/p/uupaa-js-spinoff/">HOME</a>
   | <a href="./README.htm">README</a>
   | <a href="./DEMO.htm">DEMO</a>
   | <a href="./CLASS.htm">CLASS</a>
   | <a href="./CHANGELOG.htm">CHANGE LOG</a>
   | <a href="./DONATE.htm">DONATE</a>
   | <a href="./LICENSE.htm">LICENSE</a>
   |
</p>

<hr />
|
<a href="#uuCanvas">uuCanvas</a> |
<a href="#uuCanvas_Non-standard_property">uuCanvas Non-standard Property and Methods</a> |

<hr />
<h2><a name="uuCanvas">uuCanvas</a></h2>
<p>HTML5::Canvas 互換機能を提供します。</p>

<hr />

<dl>

<!-- -->
  <dt><a name="uu.canvas.init">uu.canvas.init</a></dt>
  <dd>
    <p>uuCanvas.js を後からロードした場合に必要となる遅延初期化メソッドです。</p>
    <p>ブラウザのロードと同時に uuCanvas.js を読み込むようにしている場合は、uu.canvas.init を呼び出す必要はありません。
    </p>
       <a href="demo.canvas/1_1_canvas_remove_fallback.htm">遅延ロードのテスト</a>
  </dd>

  <dt><a name="uu.canvas.create">uu.canvas.create</a></dt>
  <dd>
    <p>uu.canvas.create(<i>width</i> = 300, <i>height</i> = 150, <i>backendOrder</i> = "svg sl fl vml", <i>placeHolderNode</i> = undefined) は、
      動的に canvas 要素を生成し、<i>placeHolderNode</i> と置き換えます。</p>
    <p>
      <i>placeHolderNode</i> を省略した場合は、&lt;body&gt; の子要素として &lt;canvas&gt;を追加します。<br />
      Silverlight や Flash バックエンド利用時は、IE の &lt;object&gt;要素の仕様により、
      一度 DOM Tree に関連付けを行うと、その &lt;object&gt; 要素は他の場所に移動できなくなります(移動するとエラーになる)
    </p>
    <p>
      IEのバックエンド探索順は、デフォルトで SVG → Silverlight → Flash → VML になります。<br />
      各バックエンドが利用できない場合や、<i>placeHolderNode = "VML"</i> と明示した場合は、VML が選択されます。
    </p>
<pre>
@param Number(= 300) width - 幅を指定します。
@param Number(= 150) height - 高さを指定します。
@param String(= "svg sl fl vml") backendOrder - どのバックエンドを優先するか文字列で指定します。
                              指定可能な文字列は "svg", "silverlight", "silver", "sl", "flash", "fl", "vml" です。
@param Node(= undefined) placeHolderNode - 生成した canvas要素を埋め込む位置を指定します。
@return HTMLCanvasElement - 生成した &lt;canvas&gt; を返します。
</pre>

    <p>HTMLファイルに埋め込まれた静的な &lt;canvas&gt; でも、バックエンドオーダーが指定可能です。
       オーダーの指定は、class属性に、 class="svg sl fl vml" のように記述します。</p>
    <p>バックエンドは、&lt;canvas&gt; 毎に指定可能です。一つのページ内で複数のバックエンドを同時に利用することもできます。</p>
<pre class="eg">
&lt;body&gt;
&lt;canvas <b>class="sl"</b> width="300" height="300"&gt;Silverlight → VML 順に探索&lt;/canvas&gt;
&lt;canvas <b>class="fl sl"</b> width="300" height="300"&gt;Flash → Silverlight → VML 順に探索&lt;/canvas&gt;
&lt;/body&gt;
</pre>

<a href="demo.canvas/0_0_create_canvas.htm" class="run">RUN</a> 動的に canvas 要素を生成する
<pre>
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script&gt;xconfig={dir:"../"}&lt;/script&gt;
&lt;script src="../uuCanvas.js"&gt;&lt;/script&gt;
&lt;script&gt;
function xcanvas(uu) {
  var width = 300;
  var height = 150;
  var backendOrder = "flash sl vml";

  if (0) {
    // 挿入位置を placeholder で指定
    var canvas = <b>uu.canvas.create</b>(width, height, backendOrder,
                                      <b>uu.id("placeholder")</b>);
  } else {
    // &lt;body&gt;に追加
    var canvas = <b>uu.canvas.create</b>();
  }

  var ctx = canvas.getContext("2d");

  ctx.textBaseline = "top";
  ctx.font = "32pt 'Times New Roman'";
  ctx.fillStyle = "black";
  ctx.shadowColor = "gray";
  ctx.shadowOffsetX = 10;
  ctx.shadowOffsetY = 10;
  ctx.shadowBlur = 5;
  ctx.fillText("Hello Canvas", 0, 0);
}
&lt;/script&gt;&lt;/head&gt;&lt;body&gt;
    &lt;div id="placeholder"&gt;&lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>
  </dd>

<hr />
<h2><a name="uuCanvas_Non-standard_property">uuCanvas Non-standard Properties</a> - 非標準のプロパティ</h2>
<p>HTML5::Canvas の仕様にないプロパティの一覧です。
<br />期待したレンダリング結果が得られない場合に、調整してみてください。</p>

<dl>
    <dt>ctx.xBackend</dt>
    <dd><p>各バックエンドを示す文字列が格納されています。<br />
        "Canvas", "VML", "Silverlight", "Flash", "SVG"</p>
    </dd>

    <dt>ctx.xTextMarginTop</dt>
    <dd><p>VML でフォントの上方向のマージンを調整できます。
        通常は 0.8 ～ 1.8 の値を指定します。デフォルト値は 1.3 です。<br />
        Opera9.6～10.10でも有効です。</p>
    </dd>

    <dt>ctx.xKnockoutColor</dt>
    <dd><p>Silverlight で strokeText の内側を塗りつぶす色を指定できます。
        デフォルト値は "white" です。</p>
    </dd>

    <dt>ctx.xFlyweight</dt>
    <dd><p>描画速度とメモリ使用量の軽減が必要な場合に1を指定します。
        1を指定するとモードが切り替わります。デフォルト値は 0 です。</p>
        <ul>
          <li>0 なら、Silverlight と VML で、drawImage(canvas) と clip() が使用可能になります。高い描画品質を提供します。</li>
          <li>1 なら、Silverlight と VML で、drawImage(canvas) と clip() が使用不能になります。描画品質が犠牲になる場合があります。描画速度の向上とメモリ使用量の軽減が行われるように、内部動作が切り替わります。</li>
        </ul>
        <p>モードの切り替えは一番最初に行ってください。モードを途中で切り替えた場合の動作は未定義です。</p>
        <p>ctx.xFlyweight = 1; と ctx.lock(1); ctx.unlock(); をあわせて利用すると、より高速なアニメーションを実現できます。</p>
    </dd>
</dl>

<hr />
<h2><a name="uuCanvas-standard_methos">uuCanvas Non-standard Methods</a> - 非標準のメソッド</h2>
<p>HTML5::Canvas の仕様にないメソッドの一覧です。</p>

<dl>
    <dt>ctx.clear()</dt>
    <dd><p>現在の描画内容をクリアします。<br />
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) と同じ結果になりますが、
        こちらの方がより高速です。</p>
    </dd>

    <dt>ctx.drawCircle(x, y, radius, fillColor = undefined, strokeColor = undefined, lineWidth = 1)</dt>
    <dd><p>円を描画します。<a href="demo.canvas/demo5_overlay.htm">例</a></p>
        <p>
        ctx.beginPath(), ctx.arc(), ctx.closePath(), ctx.fill() や ctx.stroke() と同じ結果になりますが、各バックエンドが持つAPIを直接呼び出すため、こちらの方がより高速です。
        <br />
        fillColor と strokeColor には uu.color() が返す ColorHash を指定します。<br />
        fillColor と strokeColor を同時に指定すると縁付きの塗りつぶされた円を描画します。<br />
        描画される円は、globalAlphaの影響を受けます。
        バックエンドによっては、閉じていないパスがあると、パスに影響を与えたり、影響をうける場合があります。
        </p>
        <canvas id="drawCircle" width="120" height="120"></canvas>
        <pre>
&lt;canvas id="drawCircle" width="120" height="120"&gt;&lt;/canvas&gt;
function xcanvas(uu, nodes) {
    var ctx1 = uu.id("drawCircle").getContext("2d");
    ctx1.drawCircle(60, 60, 40, uu.color('hsl(200,100%,50%)'),
                                uu.color('hsl(200,80%,30%)'), 5);
}
        </pre>
    </dd>

    <dt>ctx.drawRoundRect(x, y, width, height, radius, fillColor = undefined, strokeColor = undefined, lineWidth = 1)</dt>
    <dd>
        <p>角丸の矩形を描画します。<a href="demo.canvas/demo5_overlay.htm">例</a></p>
        <p>
        radius には数値を配列( [top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius] )で指定します。
        </p>
        ctx.beginPath(), ctx.moveTo(), ctx.lineTo(), ctx.quadraticCurveTo(), ctx.closePath(), ctx.fill() や ctx.stroke() と同じ結果になりますが、各バックエンドが持つAPIを直接呼び出すため、こちらの方がより高速です。
        <br />
        fillColor と strokeColor には uu.color() が返す ColorHash を指定します。<br />
        fillColor と strokeColor を同時に指定すると縁付きの塗りつぶされた円を描画します。<br />

        描画される矩形は、globalAlphaの影響を受けます。
        バックエンドによっては、閉じていないパスがあると、パスに影響を与えたり、影響をうける場合があります。
        </p>
        <canvas id="drawRoundRect" width="120" height="120"></canvas>
        <pre>
&lt;canvas id="drawRoundRect" width="120" height="120"&gt;&lt;/canvas&gt;
function xcanvas(uu, nodes) {
    var ctx2 = uu.id("drawRoundRect").getContext("2d");
    // green leaf
    ctx2.drawRoundRect(10, 60, 50, 50, [30, 0, 30, 0],
                                uu.color('hsl(100,100%,50%)'),
                                uu.color('hsl(100,80%,30%)'), 5);
    ctx2.drawRoundRect(10, 10, 50, 50, [0, 30, 0, 30],
                                uu.color('hsl(200,100%,50%)'),
                                uu.color('hsl(200,80%,30%)'), 5);
    ctx2.drawRoundRect(60, 10, 50, 50, [30, 0, 30, 0],
                                uu.color('hsl(200,100%,50%)'),
                                uu.color('hsl(200,80%,30%)'), 5);
    ctx2.drawRoundRect(60, 60, 50, 50, [0, 30, 0, 30],
                                uu.color('hsl(200,100%,50%)'),
                                uu.color('hsl(200,80%,30%)'), 5);
}
        </pre>
    </dd>

    <dt>ctx.lock(clear = 0)</dt>
    <dd><p>ctx.lock() を呼び出すと、ctx.unlock() が呼ばれるまで描画を行いません。<br />
        ロック, アンロックを利用すると、高速で低負荷なアニメーションが可能になります。<br />
        多重ロックはできません。例外("DUPLICATE_LOCK")が発生します。
        </p>
    </dd>

    <dt>ctx.unlock()</dt>
    <dd><p>ctx.unlock() を呼び出すと、その時点までの描画コマンドをまとめて実行します。
        ctx.lock(1) でロックを開始した場合は、ctx.unlock()が実行されたタイミングで canvas をクリアし、
        各描画コマンドをまとめて実行します。<br />
        </p>
        <pre>
<u>// ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);</u>
<b>ctx.lock(1);</b> <u>// ctx.unlock() のタイミングで画面をクリアするように指示</u>

for (;;) {
    ctx.beginPath();
    ctx.moveTo();
    ctx.lineTo();
    ctx.stroke();
}
<b>ctx.unlock();</b> <u>// 画面をクリアした後に描画コマンドをまとめて処理</u>
        </pre>
    </dd>
</dl>

</body>
</html>
